<template>
  <div>
    <el-form ref="form" :model="skuForm" label-width="80px">
      <el-form-item label="SPU名称">
        <div>{{spuForm.spuName}}</div>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuForm.skuName" placeholder="请输入SKU名称"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input v-model="skuForm.price" placeholder="请输入价格" type="number"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input v-model="skuForm.weight" placeholder="请输入重量" type="number"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input v-model="skuForm.skuDesc" type="textarea" rows="4" placeholder="请输入规格描述"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form label-width="80px" :inline="true">
        <el-form-item v-for="attr in attrList" :label="attr.attrName" :key="attr.id">
          <el-select v-model="attr.attrIdValueId" placeholder="请选择">
            <el-option
            v-for="item in attr.attrValueList"
            :label="item.valueName"
            :key="item.id"
            :value="`${attr.id}:${item.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-form>
        </el-select>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form label-width="80px" :inline="true">
        <el-form-item v-for="saleAttr in saleAttrList" :label="saleAttr.saleAttrName" :key="saleAttr.id" >
          <el-select v-model="saleAttr.saleAttrIdValueId" placeholder="请选择">
            <el-option
            v-for="item in saleAttr.spuSaleAttrValueList"
            :label="item.saleAttrValueName"
            :key="item.id"
            :value="`${saleAttr.id}:${item.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-form>
        </el-select>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          :data="imgList"
          style="width: 100%; margin-bottom:20px"
          border
          @selection-change="handleSelectImg"
          >
          <el-table-column
          type="selection"
            label="label">
          </el-table-column>
          <el-table-column
            label="图片">
            <template slot-scope="{row}">
              <img :src="row.imgUrl" style="width: 100px; height: 100px">
            </template>
          </el-table-column>
          <el-table-column
            prop="imgName"
            label="名称">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="{row}">
              <el-button type="primary" @click="changeDefault(row)" v-if="!row.isDefault">设为默认值</el-button>
            <el-tag type="success" v-else>默认</el-tag>
            </template>
          </el-table-column>
        </el-table>

      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel" >取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SkuForm",
  data() {
    return {
      skuForm: {
        // SKU名称
        skuName: "",
        // 价格
        price: "",
        // 重量
        weight: "",
        // 规格描述
        skuDesc: "",
        // 选中的图片
        skuImageList: [],
      },

      // spu数据
      spuForm: {},
      // 平台属性列表
      attrList: [],
      // 销售属性列表
      saleAttrList: [],
      // 图片列表
      imgList: [],
      // 三级id
      category3Id: "",
      // 选中的图片
      selectImgList: [],
    };
  },
  methods: {
    // 初始化数据
    async initSkuInfo(spu, category1Id, category2Id, category3Id) {
      this.spuForm = spu;
      this.category3Id = category3Id;

      // 因为这三个请求数据之前没有关系，可以不用一个个发，一起发可以加快运行速度
      // 请求平台属性数据
      const promise1 = this.$API.attr.getAttrList(
        category1Id,
        category2Id,
        category3Id
      );
      // 请求销售属性数据
      const promise2 = this.$API.sku.getSpuSaleAttrList(spu.id);
      // 请求图片列表
      const promise3 = this.$API.sku.getSpuImageList(spu.id);

      // 统一发送请求
      const res = await Promise.all([promise1, promise2, promise3]);

      this.attrList = res[0].data;
      this.saleAttrList = res[1].data;
      const imgList = res[2].data;
      // 给imgList一个default属性
      imgList.forEach((item) => {
        item.isDefault = false;
      });
      // 这里不需要设为响应式的，因为是push进去的
      this.imgList = imgList;
    },
    // 点击选择图片会触发
    handleSelectImg(value) {
      // 这里的value是选中的数组
      this.selectImgList = value;
    },
    // 设置默认图片
    changeDefault(row) {
      // 将所有图片的default都设置为false
      this.imgList.forEach((item) => {
        item.isDefault = false;
      });
      // 将当前的default设为true
      row.isDefault = true;
    },

    // 点击保存
    async save() {
      const {
        category3Id,
        skuForm,
        spuForm,
        attrList,
        saleAttrList,
        selectImgList,
      } = this;

      // 整理数据格式
      // 整理父组件传过来的数据
      skuForm.spuId = spuForm.id;
      skuForm.tmId = spuForm.tmId;
      skuForm.category3Id = category3Id;

      // 平台属性的收集（只有选中的才要收集）
      skuForm.skuAttrValueList = attrList.reduce((pre, item) => {
        // 如果选中了才有值
        const attrIdValueId = item.attrIdValueId;
        // 有值才能进行拆分
        if (attrIdValueId) {
          const [attrId, valueId] = attrIdValueId.split(":");
          const obj = {
            attrId,
            valueId,
          };
          pre.push(obj);
        }
        return pre;
      }, []);

      // 销售属性的收集（只有选中的才要收集）
      skuForm.skuSaleAttrValueList = saleAttrList.reduce((pre, item) => {
        // 如果选中了才有值
        const saleAttrIdValueId = item.saleAttrIdValueId;
        // 有值才能进行拆分
        if (saleAttrIdValueId) {
          const [saleAttrId, saleAttrValueId] = saleAttrIdValueId.split(":");
          const obj = {
            saleAttrId,
            saleAttrValueId,
          };
          pre.push(obj);
        }
        return pre;
      }, []);

      // 图片列表收集
      skuForm.skuImageList = selectImgList.map((item) => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id,
        };
      });

      // 收集完数据就发送请求
      try {
        // 发送请求
        await this.$API.sku.addOrUpdate(skuForm);
        this.$message.info("添加SKU成功");
        //  隐藏skuForm
        this.$emit("update:visible", false);
        // 清空列表
        this.resetData();
      } catch (e) {
        this.$message.info("添加SKU失败");
      }
    },
    // 清空样式
    resetData() {
      Object.assign(this.$data, this.$options.data());
    },
    // 点击取消隐藏skuForm
    cancel() {
      this.$emit("update:visible", false);
      // 清空列表
      this.resetData();
    },
  },
};
</script>

<style>
</style>
